import Page from '../../base/page'
import PrintBar from '../../coms/printBar/printBar'
import Paper from '../../coms/paper/Paper'
import template from './template.hbs'
import { inBox } from '@/psoon/base/utils'
import { On } from '@/psoon/ext/decorators'
import './style.scss'

class CreatePage extends Page {
  px2mmRatio = 1

  elEvents = {
    'click @ {document}':  e =>{
      const paper = this.find('page-paper')
      paper.clearActive()
    }
  }

  constructor() {
    super( template )
    window.px2mmRatio = this
  }

  @On('drag-mousemove')
  dragMoving( drag ){
    const target = drag.target
    const block = drag.block

    const paper = this.find('page-paper')
    const pagedv = paper.getPaperEl()
    if( pagedv ){
      const pel = pagedv
      const bel = block.el
      paper?.inbox( inBox(bel, pel) )
    }
  }

  @On('drag-mouseup')
  dragMouseup( drag ){
    if(!drag) return;
    const block = drag.block
    const paper = this.find('page-paper')
    const pagedv = paper.getPaperEl()
    const pel = pagedv
    const bel = block?.el

    if(bel && inBox(bel, pel)){
      paper.appendBlock( block )
    }else{
      block?.remove()
    }
    paper.clearInbox()
  }

  onCreated(){
    console.log('onCreated')
    // this.on('drag-mousemove', this.dragMoving.bind(this))
  }

  onRendered(){
    this.addChild( new PrintBar() , '.bar')
    this.addChild( new Paper(), '.ps-paper', 'page-paper') 
  }

  onBeforeRender( tpl ){
    return $(tpl).addClass('psoon-main')
  }

  onBeforeTemplate( model ){
    return Object.assign(model, {title: '哈哈，'})
  }
}

export default CreatePage;